<template>
	<view class="store-list">
		<view class="store-item" @click="goDetail(item)" v-for="(item,index) in medicalList" :key="index">
			<image class="store-image" :src="$util.img(item.goods_image)" mode="aspectFill" lazy-load/>
			<view class="store-info">
				<view class="text-bold ellipsis-2 m-b-14" style="height: 78rpx;line-height: 1.4;">{{item.goods_name}}</view>
				<view class="flex" v-if="!page">
					<view class="m-r-10"
						v-for="(tag,tagindex) in item.goods_label" 
						:key="tagindex"
						:class="{'tags1': tagindex % 2 === 0, 'tags2': tagindex % 2 !== 0}"
					>
						{{tag}}
					</view>
				</view>
				<view class="flex" v-else>
					<view class="m-r-10" 
						v-for="(tag,tagindex) in item.goods_label" 
						:key="tagindex"
						:class="{'tags1': tagindex % 2 === 0, 'tags3': tagindex % 2 !== 0}"
					>{{tag}}</view>
				</view>
				<view class="flex-between m-t-20">
					<view class="font-32 c-origin flex-y-baseline text-bold" v-if="parseFloat(item.price) > 0">
					  <text class="font-20">¥</text>{{item.price}}
					</view>
					<view class="c-origin text-bold" v-else>
					  <block v-if="page !== 'life'">免费</block>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"medicalGoods",
		props: {
			page: {
				type: String,
				default: ""
			},
			medicalList: {
				type: Array,
				default: () => []
			},
			pageType: {   //goods 代表商品
				type: String,
				default: ''
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			goDetail(item) {
				if(this.page == 'life') {
					if(this.pageType == 'goods') {
						this.$util.redirectTo('/otherpages/life/goodsDetail?id='+item.goods_id)
					}else {
						this.$util.redirectTo('/otherpages/life/detail?id='+item.goods_id)
					}
				}else {
					if(this.pageType == 'goods') {
						this.$util.redirectTo('/otherpages/medical/newGoodsDetail?id='+item.goods_id)
					}else {
						this.$util.redirectTo('/otherpages/medical/goodsDetail?id='+item.goods_id)
					}
					
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
.store-list {
	.store-item {
		position: relative;
		margin: 24rpx 24rpx 0;
		padding: 24rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		
		.store-image {
			width: 178rpx;
			height: 178rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}
		
		.store-info {
			width: 68%;
		}
		
	}
	.tags1 {
		font-size: 20rpx;
		color: #FF6619;
		border-radius: 10rpx;
		background: #FBEDE6;
		padding: 0 10rpx;
	}
	.tags2 {
		font-size: 20rpx;
		color: #0C7EFF;
		border-radius: 10rpx;
		background: #E6F2FF;
		padding: 0 10rpx;
	}
	.tags3 {
		font-size: 20rpx;
		color: #00B867;
		border-radius: 10rpx;
		background: #E6FAF1;
		padding: 0 10rpx;
	}
}


  .iconfont  {
  	  font-size: 24rpx;
  }
</style>